import { defineComponent, ref } from 'vue';
import { Button } from '../shared/Button';
import { FloatButton } from '../shared/FloatButton';
import pig from "../assets/icons/pig.png"
import s from './StartPage.module.scss';
import { Navbar } from '../shared/Navbar';
import { OverlayIcon } from '../shared/Overlay';
import { RouterLink } from 'vue-router';
export const StartPage = defineComponent({
    setup(props, context) {

        return () => (
            <div>
                <Navbar class={s.nav}>{

                    {
                        default: () => "山竹记账",
                        icon: () => <OverlayIcon />,
                    }

                }</Navbar>
                <center class={s.pig}>
                    <img src={pig} />
                </center>
                <div class={s.button_wrapper}>
                    <RouterLink to="/items/create">
                        <Button class={s.button} >开始记账</Button>
                    </RouterLink>
                    <RouterLink to="/items/create">
                        <FloatButton iconName='add' />
                    </RouterLink>

                </div>
            </div>
        );
    }
})